<html>
  <head>
    <title>Batik demo</title>
    <style type="text/css">
      body, table {
        font-family: sans-serif;
        font-size: 12px;
      }
      #data {
        background: #ffe;
        border: 1px solid #cca;
        border-collapse: collapse;
      }
      #data td, #data th {
        padding: 4px;
      }
      #data th {
        text-align: left;
        background: #cca;
      }
      #layout {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table id="layout">
      <tr>
        <td>
          <applet id="chart" code="AppletDemo.class" width="400" height="300"
                  mayscript="mayscript"
                  archive="batik-all.jar,xml-apis-dom3.jar">
            Your browser doesn't seem to support Java applets, which is required
            for this demo.
          </applet>
        </td>
        <td>
          <table id="data">
            <tr>
              <th>Expense</th><th>Amount</th>
            </tr>
            <tr>
              <td>Shoe</th>
              <td><input id="ShoeBar" type="text" value="10"></td>
            </tr>
            <tr>
              <td>Car</th>
              <td><input id="CarBar" type="text" value="20"></td>
            </tr>
            <tr>
              <td>Travel</th>
              <td><input id="TravelBar" type="text" value="10"></td>
            </tr>
            <tr>
              <td>Computer</th>
              <td><input id="ComputerBar" type="text" value="60"></td>
            </tr>
          </table>
          <p>
            <button onclick="update()">Update chart</button>
          </p>
        </td>
      </tr>
    </div>
    <script>
      var chart = document.getElementById("chart");

      function update() {
        updateBar("ShoeBar");
        updateBar("CarBar");
        updateBar("TravelBar");
        updateBar("ComputerBar");
      }

      function updateBar(name) {
        var value = Number(document.getElementById(name).value);
        if (!isNaN(value) && value >= 0) {
          chart.updateBar(name, value);
        }
      }
    </script>
  </body>
</html>
